<!--
 * @Author: qm
 * @Date: 2020-12-02 12:00:00
 * @LastEditors: qm
 * @LastEditTime: 2020-12-02 12:00:00
 * @Description:
-->
<template>
    <div class="scanner">
        <van-nav-bar title="B2B交接" left-text="返回" @click-left="onClickLeft"></van-nav-bar>
        <van-row type="flex" justify="center">
            <van-col span="24">
                <van-form class="common-form">
                    <van-field is-link label="装车号" v-model="formItem.entruckingName"
                               @click="entruckingCodeShow = true" />
                    <van-action-sheet
                        v-model="entruckingCodeShow"
                        :actions="entruckingCodeActions"
                        :close-on-click-overlay="true"
                        @click-overlay="loadingCartonNoCancel"
                        @select="loadingCartonNoSelect"
                    />
                    <van-field
                        v-model="formItem.cartonNo"
                        ref="cartonNo"
                        id="cartonNo"
                        name="箱号"
                        label="箱号"
                        placeholder="箱号"
                        @keyup.enter.native="searchCartonNoData"
                        @focus="cartonNoFocusClick"
                        @click="cartonNoFocusClick"
                        :readonly="cartonNoReadOnly"
                        :rules="[{required: true, message: '请扫描箱号'}]"
                    />
                </van-form>
            </van-col>
        </van-row>
        <van-row style="margin-top: 0.5rem;" type="flex" justify="center">
            <van-col>
                <van-cell :value="handOverNumInfo" readonly></van-cell>
            </van-col>
        </van-row>
        <van-overlay :show="show" @click="show = false" />
        <van-tabbar>
            <van-tabbar-item icon="search" @click="lookDiff">查看差异</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
    //查询货主和快递公司的方法
    import { mapGetters } from "vuex";
    import {
        getLoadingCartonNoList,
        getcartonSumFunction,
        getCartonNoDataFunction
    } from "@/api/handOver/handOverB2B.js";

    export default {
        name: "b2bHandOver",
        computed: {
            ...mapGetters("user", ["userData"]),
            ...mapGetters("scanner", ["pdaScanData"])
        },
        watch: {
            $route: {
                handler(route) {
                    if (route.name === "b2bHandOver") {
                        //检查是否已选货主仓库品牌
                        this.checkData();
                        this.getEntruckingCode();
                        //设置已交接箱数和总箱数信息
                        this.handOverNumInfo =
                            "已交接箱数 " +
                            this.handOverCartonNum.length +
                            "\t总箱数 " +
                            this.cartonSum.length +
                            "\t差异箱数 " +
                            (this.cartonSum.length - this.handOverCartonNum.length);
                        this.entruckingCode = "";
                        this.entruckingName = "";
                        if (this.$route.query.entruckingId != undefined) {
                            this.entruckingCode = this.$route.query.entruckingId;
                            this.entruckingName = this.$route.query.entruckingCode;
                        }
                    }
                }
            },
            deep: true,
            // 扫描枪操作
            pdaScanData: {
                handler(data) {
                    // this.scanEvent(data.data);
                    let input = document.activeElement.id;
                    if (input == "cartonNo") {
                        this.formItem.cartonNo = data.data;
                        this.searchCartonNoData();
                    }
                },
                deep: true
            }
        },
        created() {
            this.entruckingCode = "";
            this.entruckingName = "";
            if (this.$route.params.entruckingId != undefined) {
                this.entruckingCode = this.$route.params.entruckingId;
                this.entruckingName = this.$route.params.entruckingCode;
            }
            //检查是否已选货主仓库品牌
            this.checkData();
            this.getEntruckingCode();
            //设置已交接箱数和总箱数信息
            this.handOverNumInfo =
                "已交接箱数 " +
                this.handOverCartonNum.length +
                "\t总箱数 " +
                this.cartonSum.length +
                "\t差异箱数 " +
                (this.cartonSum.length - this.handOverCartonNum.length);
        },
        data() {
            return {
                storerId: "",
                wareHouseId: "",
                brandId: "",
                entruckingCode: "",
                entruckingName: "",
                show: false,
                //控制装车号下拉框展示
                entruckingCodeShow: false,
                //装车号下拉框数据
                entruckingCodeActions: [],
                cartonNoReadOnly: false,
                formItem: {
                    //装车号
                    entruckingCode: "",
                    entruckingName: "",
                    cartonNo: ""
                },
                //已交接箱数
                handOverCartonNum: [],
                //总箱数
                cartonSum: [],
                //显示交接箱数信息
                handOverNumInfo: ""
            };
        },
        methods: {
            //返回上一级
            onClickLeft() {
                this.$router.push({
                    name: "handOverIndex"
                });
            },

            checkData() {
                // 验证货主/仓库/品牌
                if (this.$root.storerWarehouseBrand.storerId === undefined) {
                    this.$notify({ type: "warning", message: "请重新登录，并设置货主、仓库、品牌!" });
                    return false;
                } else {
                    this.storerId = this.$root.storerWarehouseBrand.storerId;
                    this.wareHouseId = this.$root.storerWarehouseBrand.warehouseId;
                    this.brandId = this.$root.storerWarehouseBrand.brandId;
                    return true;
                }
            },

            //查询装车号下拉框数据方法
            getEntruckingCode() {
                if (this.checkData()) {
                    getLoadingCartonNoList(this.storerId, this.wareHouseId, this.brandId).then(response => {
                        this.entruckingCodeActions = [];
                        this.formItem.entruckingName = "";
                        this.formItem.entruckingCode = "";
                        if (response.data.status) {
                            let data = {};
                            for (let i = 0; i < response.data.data.length; i++) {
                                data = {
                                    name: response.data.data[i].entruckingCode,
                                    code: response.data.data[i].id
                                };
                                this.entruckingCodeActions.push(data);
                            }
                            this.cartonNoFocus();
                            if (this.entruckingCode != "" && this.entruckingName != "") {
                                let index = 0;
                                for (let i = 0; i < this.entruckingCodeActions.length; i++) {
                                    if (
                                        this.entruckingCode === this.entruckingCodeActions[i].code &&
                                        this.entruckingName === this.entruckingCodeActions[i].name
                                    ) {
                                        this.formItem.entruckingName = this.entruckingCodeActions[i].name;
                                        this.formItem.entruckingCode = this.entruckingCodeActions[i].code;
                                        break;
                                    } else {
                                        index = index + 1;
                                        if (index == this.entruckingCodeActions.length) {
                                            this.formItem.entruckingName = this.entruckingCodeActions[0].name;
                                            this.formItem.entruckingCode = this.entruckingCodeActions[0].code;
                                        }
                                    }
                                }
                            } else {
                                this.formItem.entruckingName = this.entruckingCodeActions[0].name;
                                this.formItem.entruckingCode = this.entruckingCodeActions[0].code;
                            }
                            this.getcartonSum(this.formItem.entruckingCode, this.formItem.entruckingName);
                        } else {
                            this.$notify({ type: "warning", message: response.data.message });
                        }
                    });
                }
            },

            //点击遮罩层时触发关闭装车号下拉框方法
            loadingCartonNoCancel() {
                this.cartonNoFocus();
            },

            //选择装车号下拉框数据后执行的方法
            loadingCartonNoSelect(item) {
                this.entruckingCodeShow = false;
                this.formItem.entruckingName = item.name;
                this.formItem.entruckingCode = item.code;
                this.cartonNoFocus();
                this.getcartonSum(this.formItem.entruckingCode, this.formItem.entruckingName);
            },

            //在每次选择了装车号后获取已交接箱数和总箱数数量方法
            getcartonSum(entruckingId, entruckingCode) {
                getcartonSumFunction(entruckingId, entruckingCode).then(response => {
                    if (response.data.status) {
                        this.handOverCartonNum = response.data.data.handOverCartonNumList;
                        this.cartonSum = response.data.data.cartonSumList;
                        this.handOverNumInfo =
                            "已交接箱数 " +
                            this.handOverCartonNum.length +
                            "\t总箱数 " +
                            this.cartonSum.length +
                            "\t差异箱数 " +
                            (this.cartonSum.length - this.handOverCartonNum.length);
                    }
                });
            },

            //控制光标到箱号输入框方法
            cartonNoFocus() {
                this.$nextTick(() => {
                    this.$refs["cartonNo"].focus();
                });
            },

            //箱号输入框回车后执行的方法
            searchCartonNoData() {
                // 验证货主/仓库/品牌
                if (this.checkData()) {
                    if (this.entruckingCodeActions.length == 0) {
                        this.$toast.fail("装车号数据为空,无法交接");
                        return;
                    }
                    if (this.formItem.cartonNo == "") {
                        this.$toast.fail("箱号不能为空");
                        this.cartonNoFocus();
                        return;
                    }
                    //输入箱号回车后执行方法
                    getCartonNoDataFunction(
                        this.$root.storerWarehouseBrand.storerId,
                        this.$root.storerWarehouseBrand.warehouseId,
                        this.$root.storerWarehouseBrand.brandId,
                        this.formItem.entruckingCode,
                        this.formItem.entruckingName,
                        this.formItem.cartonNo,
                        this.userData.sysUserLoginName
                    ).then(response => {
                        //记录下装车号
                        this.entruckingCode = this.formItem.entruckingCode;
                        this.entruckingName = this.formItem.entruckingName;
                        //重新查询一遍装车号数据
                        this.getEntruckingCode();
                        //清空箱号
                        this.formItem.cartonNo = "";
                        //焦点给箱号框
                        this.cartonNoFocus();
                        if (response.data.status) {
                            this.handOverCartonNum = response.data.data.handOverCartonNumList;
                            this.cartonSum = response.data.data.cartonSumList;
                            this.handOverNumInfo =
                                "已交接箱数 " +
                                this.handOverCartonNum.length +
                                "\t总箱数 " +
                                this.cartonSum.length +
                                "\t差异箱数 " +
                                (this.cartonSum.length - this.handOverCartonNum.length);
                            this.$notify({ type: "success", message: response.data.message });
                        } else {
                            /*if (response.data.code == 502) {
                                //code为502代表已交接完成 重新查询装车下拉框数据
                                this.getEntruckingCode();
                            }*/
                            this.$notify({ type: "warning", message: response.data.message });
                        }
                    });
                }
            },

            //点击箱号后执行方法
            cartonNoFocusClick() {
                this.cartonNoReadOnly = true;
                setTimeout(() => {
                    this.cartonNoReadOnly = false;
                }, 200);
            },

            lookDiff() {
                if (this.cartonSum - this.handOverCartonNum == 0) {
                    this.$toast.fail("差异箱数不能为空!");
                } else {
                    this.$router.push({
                        name: "lookDiffCartonDetails",
                        params: {
                            entruckingId: this.formItem.entruckingCode,
                            entruckingCode: this.formItem.entruckingName
                        }
                    });
                }
            }
        }
    };
</script>

<style lang="less">
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .msgTxt {
        margin: 8px 83px 0;
        font-size: 18px;
        color: white;
    }
</style>
